<template>
  <div class="icon-container">
    <a-card class="card">
      <div class="show-icon">
        <SvgIcon name="drag-chart_bubble" color="#2f2d4d" class="menu-item-svg"
          :class-value="{ width: '48px', height: '48px' }"></SvgIcon>
        <SvgIcon name="drag-chart_line" color="#3dee85" class="menu-item-svg"
          :class-value="{ width: '48px', height: '48px' }"></SvgIcon>
        <SvgIcon name="drag-leidatu" color="#46184a" class="menu-item-svg"
          :class-value="{ width: '48px', height: '48px' }"></SvgIcon>
        <SvgIcon name="drag-line_book" color="#68bbc3" class="menu-item-svg"
          :class-value="{ width: '48px', height: '48px' }"></SvgIcon>
        <SvgIcon name="drag-line_car" color="#cd34ce" class="menu-item-svg"
          :class-value="{ width: '48px', height: '48px' }"></SvgIcon>
        <SvgIcon name="drag-line_display" color="#c16453" class="menu-item-svg"
          :class-value="{ width: '48px', height: '48px' }"></SvgIcon>
        <SvgIcon name="drag-line_file" color="#cef2ed" class="menu-item-svg"
          :class-value="{ width: '48px', height: '48px' }"></SvgIcon>
        <SvgIcon name="drag-line_home_setting" color="#1ea3c6" class="menu-item-svg"
          :class-value="{ width: '48px', height: '48px' }"></SvgIcon>
        <SvgIcon name="drag-line_home" color="#92bfb4" class="menu-item-svg"
          :class-value="{ width: '48px', height: '48px' }"></SvgIcon>
        <SvgIcon name="drag-line_money" color="#a49bc6" class="menu-item-svg"
          :class-value="{ width: '48px', height: '48px' }"></SvgIcon>
      </div>


      <a-descriptions title="配置项" bordered :column="1">
        <a-descriptions-item label="插件">
          vite-plugin-svg-icons 官方文档请查看：https://github.com/vbenjs/vite-plugin-svg-icons
        </a-descriptions-item>
        <a-descriptions-item label="name">图标的名称，必须在 src/assets/svg
          目录下，文件名-目录，比如src/assets/svg/drag/chart_bubble.svg，那么name="drag-chart_bubble"</a-descriptions-item>
        <a-descriptions-item label="color">图标的颜色</a-descriptions-item>
        <a-descriptions-item label="classValue">图标样式，默认{ 'width': '22px', 'height': '22px' }</a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
</template>
<script lang='ts' setup>
import SvgIcon from '@/components/SvgIcon/index.vue';

</script>
<style lang='less' rel='stylesheet/less' scoped>
.icon-container {
  margin: 20px;
  height: calc(100% - 80px);

  .card {
    height: 100%;
    min-width: 1000px;
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;

    .show-icon {
      margin: 20px;
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>